<template>
	<!-- <view :class="showscrollY?'he100 pages':'pages'"> -->
	<view>
		<view class="status-bar" v-if="isShowStatusBar"></view>
		<view class="top">
			<!-- <image  src="../../static/shouye/newHome/bg10.png" width="100%" class="bgtou" mode=""></image> -->
			<view class="status_bar"></view>
			<view class="title">
				<view class="left">
					<image class="left" @click="goapge('/pages/other/masslist')" src="../../static/cut/2222.png" mode=""></image>
					<text v-if="unread_msg_count">{{unread_msg_count}}</text>
				</view>
				<!-- <image class="right" @click="sign" src="../../static/cut/1111.png" mode=""></image> -->
			</view>
			<view>
				<view class="duobianxing">
				</view>
				<view @click="goapgece" class="yuan" style="overflow: hidden;">
					<view class="shuiqiu">
						<view class="shuiqiucontent">
							<view class="shui shui2" :class="{'red': CompanyPoint < 60, 'blue': CompanyPoint > 80, 'yellow': CompanyPoint >= 60 && CompanyPoint <= 80}"
							 :style="{top: bollTopPx}"></view>
							<view class="shui shui3" :class="{'red': CompanyPoint < 60, 'blue': CompanyPoint > 80, 'yellow': CompanyPoint >= 60 && CompanyPoint <= 80}"
							 :style="{top: bollTopPx}"></view>
							<view class="shui shui4" :class="{'red': CompanyPoint < 60, 'blue': CompanyPoint > 80, 'yellow': CompanyPoint >= 60 && CompanyPoint <= 80}"
							 :style="{top: bollTopPx}"></view>
							<view class="shui shui1" :class="{'red': CompanyPoint < 60, 'blue': CompanyPoint > 80, 'yellow': CompanyPoint >= 60 && CompanyPoint <= 80}"
							 :style="{top: bollTopPx}"></view>
							<view class="shui shui5" :class="{'red': CompanyPoint < 60, 'blue': CompanyPoint > 80, 'yellow': CompanyPoint >= 60 && CompanyPoint <= 80}"
							 :style="{top: bollTopPx}"></view>
							<view class="shui shui6" :class="{'red': CompanyPoint < 60, 'blue': CompanyPoint > 80, 'yellow': CompanyPoint >= 60 && CompanyPoint <= 80}"
							 :style="{top: bollTopPx}"></view>
						</view>
					</view>
					<view class="num" style="position: absolute;top: -5px;">{{ CompanyScore }}</view>

				</view>
				<view class="fen0">分</view>
				<view class="fen">安全防护</view>
				<view class="fen1">企业防护</view>
				<view class="fen2">环境防护</view>
				<view class="zi"><text>企业健康指数</text></view>
				<view class="zi2">
					<text>企业健康指数良好，请继续保持</text>
				</view>

			</view>


			<view id='waveEchart' ref='waveEchart'></view>
		</view>

		<view class="card">
			<view class="dibu">
				<view @click="goPage" class="dibu-item">
					<view>
						<image class="left" src="../../static/imgs/4.png"
						style="width: 100upx;height: 100upx;margin-top: 20upx;" mode=""></image>
					</view>
					<view><text>质量管控</text></view>
				</view>
				<view @click="goPage" class="dibu-item">
					<view>
						<image class="left" src="../../static/imgs/1.png"
						style="width: 100upx;height: 100upx;margin-top: 20upx;" mode=""></image>
					</view>
					<view><text>安全守护</text></view>
				</view>
				<view @click="goPage" class="dibu-item">
					<view>
						<image class="left" src="../../static/imgs/2.png"
						style="width: 100upx;height: 100upx;margin-top: 20upx;" mode=""></image>
					</view>
					<view><text>环境守护</text></view>
				</view>
				<view @click="goPage" class="dibu-item">
					<view>
						<image class="left" src="../../static/imgs/3.png"
						style="width: 100upx;height: 100upx;margin-top: 20upx;" mode=""></image>
					</view>
					<view><text>职业卫生防护</text></view>
				</view>
			</view>
		</view>


	</view>
</template>


<style>
	
	
	
</style>

<script>
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
	var bitmap = null;
	const MIN_SCORE = 0; // 最低分 0分
	const FULL_SCORE = 126; // 满分时的最大TOP
	const TIMER_SCICLE = 20; // 循环的时间，30毫秒
	export default {
		components: {
			uniIcons
		},
		data() {
			return {
				baseURL: this.$API.baseURL,
				account: '', //用户电话
				messages: 0,
				unread_msg_count: 0, //用户现在未读消息的条数
				isFixNewsTitle: false,
				isShowStatusBar: false,
				currentNewsPage: 1,
				current: 0,
				records: 0,
				recordslist: [],
				tancshow: false,
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				//首页底部固定的条数
				newlist: [],

				/*轮播*/
				IndexLunboArr: [],
				//企业健康指数
				CompanyPoint: 0,
				CompanyScore: 0,
				bollTop: FULL_SCORE,
				bollTopPx: '126px',
				bollTopTimer: null,
				//显示咨询
				showscrollY: false,
				//是否为出发隐藏咨询
				hidescrollY: false,
				//资讯轮播当前
				ZXSwiper: 0,
				//咨询分类列表
				tabBars: [],
				page: 1,
				rows: 10,
				scrollLeft: 0,
				tabIndex: -1, //咨询列表第一次不选中
				newspagelist: [],

				// 预警事项
				warningSwiper: {
					autoplay: true,
					circular: true,
					vertical: true,
					multi: 2
				},

				// 支付弹窗
				showSuccess: false,
				price: 0,
				newsid: ''
			};
		},
		
		onLoad() {
			
			// #ifdef APP-PLUS
			bitmap = new plus.nativeObj.Bitmap('bmp1');
			bitmap.loadBase64Data(
				'',
				function() {},
				function(e) {})
			// #endif
			// 进入时判断用户是否登录
			if (!uni.getStorageSync("userid") || !uni.getStorageSync("deptid") || !uni.getStorageSync("phone")) {
				uni.redirectTo({
					url: "../login/login"
				})
			} 
		},
		
		onHide() {
			// #ifdef APP-PLUS
			/* 隐藏凸起图标 */
			var icon = plus.nativeObj.View.getViewById("icon");
			setTimeout(function() {
				if (icon) {
					icon.hide();
				}
			}, 100);
			// #endif

			clearInterval(this.bollTopTimer);
			this.bollTop = FULL_SCORE;
			this.bollTopPx = `${this.bollTop}px`;
			this.CompanyScore = MIN_SCORE;
		},
		onShow() {
			// #ifdef APP-PLUS
			var icon = plus.nativeObj.View.getViewById("icon");
			setTimeout(function() {
				if (icon) {
					icon.show();
				}
			}, 100);
			// #endif
			
			this.getCompanyPoint();
			


			if (this.$appjs.jim.isLogin()) {
				this.onMsgReceive();
				this.getConversation();
			}
		},
		
		
		methods: {
			
			goPage(){
				uni.showToast({
					title: "功能未开放",
					icon: 'none'
				})
			},
			toPage(url) {
				uni.navigateTo({
					url
				})
			},
			//会话的消息提示监听
			onMsgReceive() {
				var _this = this;
				_this.$appjs.jim.onMsgReceive(function(data) {
					uni.vibrateLong();

					const innerAudioContext = uni.createInnerAudioContext();
					innerAudioContext.autoplay = true;
					innerAudioContext.src = '/static/thebell/dingding.mp3';
					innerAudioContext.onPlay(() => {
						console.log('开始播放');
					});
					innerAudioContext.onError((res) => {
						console.log(res.errMsg);
						console.log(res.errCode);
					});
					_this.getConversation();
				});
			},
			//获取会话列表  --- 获取消息的条数
			getConversation() {
				var _this = this;
				_this.$appjs.jim.getConversation().onSuccess(function(data) {
					_this.unread_msg_count = 0;
					data.conversations.forEach(function(v, i) {
						_this.unread_msg_count = _this.unread_msg_count + v.unread_msg_count
					})
					if (_this.unread_msg_count > 99) {
						_this.unread_msg_count = 99 + '+'
					}
				})
			},
			// 得分水球
			setWaterBoll() {
				// 设置动态水球
				let toTop = FULL_SCORE - (this.CompanyPoint * (FULL_SCORE / 100));
				this.bollTopPx = `${toTop}px`;
				this.CompanyScore = this.CompanyPoint;
				return;


				this.bollTopTimer = setInterval(() => {
					if (this.bollTop <= toTop) {
						return clearInterval(this.bollTopTimer);
					}
					this.bollTop--;
					this.bollTopPx = `${this.bollTop}px`;
				}, TIMER_SCICLE - 10);

				// 设置动态分数
				let bollScoreTimer = setInterval(() => {
					if (this.CompanyScore >= this.CompanyPoint) {
						return clearInterval(bollScoreTimer);
					}
					this.CompanyScore++;
				}, TIMER_SCICLE);
			},
			//创建底部导航中间的圆形
			createtab: function() {
				// 设置水平居中位置
				var leftPos = Math.ceil((plus.screen.resolutionWidth - 50) / 2);
				var view = plus.nativeObj.View.getViewById("icon");
				if (!view) {
					view = new plus.nativeObj.View('icon', {
						bottom: '20px',
						left: leftPos + 'px',
						width: '55px',
						height: '55px'
					});
				}
				var backgrdColor = '#c8153f';
				this.CompanyPoint < 60 ? backgrdColor = '#c8153f' : (this.CompanyPoint < 80 ? backgrdColor = '#ffd300' :
					backgrdColor = '#368ce6')

				view.drawRect({
					color: '#ffffff',
					radius: '55px'
				});
				view.drawRect({
					color: 'rgba(0,0,0,0)',
					borderColor: '#bfbfbf',
					borderWidth: '0.5px',
					radius: '55px'
				}, {
					top: '0px',
					left: '0px',
					width: '100%',
					height: '100%'
				});
				view.drawRect({
					color: '#ffffff'
				}, {
					top: '25px',
					left: '0',
					width: '55px',
					height: '30px'
				});
				view.drawRect({
					color: backgrdColor,
					radius: '43px'
				}, {
					top: '6px',
					left: '6px',
					width: '43px',
					height: '43px'
				});
				view.drawText(this.CompanyPoint, {
					top: '0px',
					left: '0px',
					width: '100%',
					height: '100%'
				}, {
					align: 'center',
					'size': '28px',
					'color': '#fff'
				});

				// view.drawBitmap(bitmap, {
				// 	tag: 'font',
				// 	id: 'icon',
				// 	src: '/static/app-tabber/app-tabber.png',
				// 	position: {
				// 		top: '0px',
				// 		left: '5px',
				// 		width: '50px',
				// 		height: '100%'
				// 	}
				// });
				view.addEventListener("click", function(e) {
					uni.switchTab({
						url: '/pages/riskEvaluation/fengxianpingce'
					})
				}, false);
				view.show();
			},
			
			//企业健康指数
			getCompanyPoint() {
				var _this = this;

				// 异步获取远端数据
				uni.request({
					url: this.$API.getCompanyPoint,
					method: "POST",
					data: {
						userid: uni.getStorageSync("userid"),
						company: uni.getStorageSync("company")
					},
					header: this.$API.get_head(),
					success: (res) => {
						_this.messages = res.data.msg
						_this.CompanyPoint = res.data.point;
						
						_this.setWaterBoll();

						// #ifdef APP-PLUS
						_this.createtab();
						// #endif

					},
					fail: () => {
						uni.showToast({
							title: "加载失败",
							icon: 'none'
						})
					}
				})
			},
			
			upper: function(e) {
				console.log(e)
			},
			lower: function(e) {
				this.page++;
				this.lists_zxdetail(this.tabBars[this.tabIndex].id)
			},
			scroll: function(e) {
				console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			goapgece() {
				uni.switchTab({
					url: '/pages/riskEvaluation/fengxianpingce'
				});
			},
			goapge(e) {
				uni.navigateTo({
					url: e,
				})
			},
			
			//获取地址参数
			GetQueryString(url, name) {
				var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
				url = url.slice(url.indexOf("?"));
				var r = url.substr(1).match(reg); //获取url中"?"符后的字符串并正则匹配
				var context = "";
				if (r != null)
					context = r[2];
				reg = null;
				r = null;
				return context == null || context == "" || context == "undefined" ? "" : context;
			},
			
			showtanc() {
				this.tancshow = false
			},
			changeSwiper(e) {
				this.current = e.detail.current
			},
			
		}
	}
</script>

<style>
	@keyframes roll {
		form {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}

.dibu {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 8%;
	}

	.dibu-item {
		width: 46%;
		height: 200upx;
		;
		border: 1upx solid #e9d4f0;
		border-radius: 20upx;
		box-shadow: 0 0 15upx #d1d1d1;
	}
	.dibu-item:first-child{margin-bottom:30upx;}
	.dibu-item:second-child{margin-bottom:30upx;}
	.dibu-item view{
		text-align: center;
	}
	

	.shuiqiu {
		width: 126px;
		height: 126px;
		border-radius: 50%;
		position: relative;
		overflow: hidden;
	}

	.shuiqiucontent {
		width: 100%;
		height: 100%;
		position: relative;
		overflow: hidden;
		border-radius: 50%;
	}

	.shui {
		position: absolute;
		width: 1000px;
		height: 1000px;
		top: 126px;
		left: 50%;
		margin-left: -500px;
	}

	.shui1 {
		border-radius: 47.5%;
		background: #607d8bbe;
		animation: roll 10s linear infinite;
	}

	.shui1.red {
		background: #c8153f;
	}

	.shui1.blue {
		background: #3B81E3;
	}

	.shui1.yellow {
		background: #ffd300;
	}

	.shui2 {
		border-radius: 48%;
		background: #607d8b9a;
		animation: roll 14s linear infinite;
	}

	.shui2.red {
		background: #BC0A3E;
	}

	.shui2.blue {
		background: #3E83E5;
	}

	.shui2.yellow {
		background: #FCCE17;
	}

	.shui3 {
		border-radius: 48.5%;
		background: #607d8bab;
		animation: roll 12s linear infinite;
	}

	.shui3.red {
		background: #BC0D3E;
	}

	.shui3.blue {
		background: #3E86E8;
	}

	.shui3.yellow {
		background: #FACE17;
	}

	.shui4 {
		border-radius: 49%;
		background: #607d8b44;
		animation: roll 20s linear infinite;
	}

	.shui4.red {
		background: #BC083B;
	}

	.shui4.blue {
		background: #3E86EA;
	}

	.shui4.yellow {
		background: #F9CE17;
	}

	.shui5 {
		border-radius: 49.5%;
		background: #607d8b9f;
		animation: roll 16s linear infinite;
	}

	.shui5.red {
		background: #BB0D3E;
	}

	.shui5.blue {
		background: #3E83E3;
	}

	.shui5.yellow {
		background: #F7CE17;
	}

	.shui6 {
		border-radius: 50%;
		background: #607d8b38;
		animation: roll 19s linear infinite;
	}

	.shui6.red {
		background: #BB0A3B;
	}

	.shui6.blue {
		background: #367EE3;
	}

	.shui6.yellow {
		background: #F5CE17;
	}
</style>

<style lang="less">
	page {
		background: #F2F2F2;
		height: auto;
	}

	@keyframes myhide {
		from {
			top: 0%;
		}

		to {
			top: 100%;
		}
	}

	@keyframes myshow {
		from {
			top: 100%;
		}

		to {
			top: 0%;
		}
	}

	.scroll-Y.show {
		animation: myshow 1s;
		top: 0%;
	}

	.scroll-Y.hide {
		animation: myhide 1s;
		top: 100%;
	}

	.he100 {
		height: 100%;
	}

	/*资讯*/
	.pages {
		width: 100%;
		// height:100%;
		overflow: hidden;
	}

	.scroll-Y {
		height: 100%;
		position: fixed;
		bottom: 0;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 9999;

		.scroll-Y-page {
			background: url(../../static/zixun/4.png) no-repeat;
			background-size: 100% 100%;
			height: 100%;

			/*轮播*/
			swiper {
				height: 300upx !important;
				margin: 0 30upx !important;
				border-radius: 10upx;
				padding: 0;

				image {
					width: 100%;
					height: 300upx;
					border-radius: 10upx;
				}
			}

			.indicatorDots {
				display: flex;
				justify-content: center;
				margin: 20upx 0;
				padding: 0;

				.indicatorDotList {
					width: 26upx;
					min-width: 26upx;
					height: 26upx;
					margin-right: 18upx;

					image {
						width: 26upx;
						height: 26upx;
					}
				}

				.indicatorDotList:last-child {
					margin-right: 0upx;
				}
			}
		}

		.search {
			display: flex;
			margin: 20upx 30upx;
			align-items: center;

			.back {
				width: 24upx;
				min-height: 24upx;
				height: 37upx;
				margin-right: 20upx;
			}

			.searchBox {
				display: flex;
				width: 100%;
				height: 55upx;
				border-radius: 10upx;
				background: #FFFFFF;
				align-items: center;
				justify-content: center;

				image {
					width: 35upx;
					height: 35upx;
					margin-right: 20upx;
				}

				text {
					font-size: 24upx;
					color: #828282;
				}
			}

		}

		.scrollbox {
			margin: 0 30upx;

			.uni-swiper-tab {
				border-bottom: 0;

				.swiper-tab-list {
					width: auto;
					color: #FFFFFF;
					margin-right: 67upx;
					font-size: 27upx;
				}

				.active {
					color: #d7b262;
					font-size: 37upx;
				}
			}

		}

		
	}
</style>
<style>
	@-webkit-keyframes toFixed {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}

	@-moz-keyframes toFixed {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}

	@-o-keyframes toFixed {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}

	@keyframes toFixed {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}

	

	.title {
		height: 98upx;
		text-align: center;
		font-size: 36upx;
		line-height: 98upx;
		color: #333333;
		position: relative;
		z-index: 10;
	}

	.top {
		width: 100%;
		/* background: #007AFF; */
		background: url(../../static/shouye/newHome/bg10.png);
		background-repeat: no-repeat;

		background-size: 100% 100%;
		position: relative;
		height: 636upx;
	}

	.bgtou {
		width: 100%;
		height: 600upx;
		position: absolute;
		z-index: -S1;
	}

	.duobianxing {
		width: 300rpx;
		height: 300rpx;
		background: url(../../static/imgs/duobianxing2.png);
		background-size: 100% 100%;
		position: absolute;
		top: 125rpx;
		left: 225rpx;
		right: 0;
		bottom: 0;

	}

	.yuan {
		width: 230rpx;
		height: 230rpx;
		border-radius: 50%;
		position: absolute;
		top: 159rpx;
		left: 260rpx;
		right: 0;
		bottom: 0;
		/* background:#c8153f; */
		z-index: 2;
	}

	.backgrdRed {
		background: #c8153f;
	}

	.backgrdblue {
		background: #368ce6;
	}

	.backgrdyellow {
		background: #ffd300;
	}

	.yuan .num {
		position: absolute;
		color: #fff;
		font-size: 100upx;
		text-align: center;
		width: 100%;
		line-height: 200upx;
	}

	.fen {
		position: absolute;
		top: 320upx;
		right: 160upx;
		color: #fff;
		font-size: 20upx;
	}

	.fen0 {
		position: absolute;
		top: 240upx;
		right: 280upx;
		color: #fff;
		font-size: 24upx;
		z-index: 5;
	}

	.fen1 {
		position: absolute;
		top: 100upx;
		right: 335upx;
		color: #fff;
		font-size: 20upx;
	}

	.fen2 {
		position: absolute;
		top: 320upx;
		right: 530upx;
		color: #fff;
		font-size: 20upx;
	}

	.zi {
		position: absolute;
		width: 100%;
		text-align: center;
		color: #fff;
		bottom: 290rpx;
		font-size: 23rpx;
		z-index: 3;

	}
	
	.zi2 {
		position: absolute;
		width: 100%;
		text-align: center;
		color: #fff;
		
		bottom: 100rpx;
		
		z-index: 3;
	
	}
	
	.zi2 text {
		display: inline-block;
		/* border: 1upx solid #ab8374; */
		padding: 20upx 30upx 20upx 30upx;
		border-radius: 30upx;
		line-height: 1;
		margin: 10upx;
		font-size: 28upx;
		
		background: rgb(106,147,238);
	
	}

	.zi text {
		display: inline-block;
		border: 1upx solid #ab8374;
		padding: 8upx 10upx;
		border-radius: 20upx;
		line-height: 1;

	}
	

	

	.card {
		background: #FFFFFF;
		margin-bottom: 10upx;
	}

	
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}
	.status-bar {
		-webkit-animation: toFixed 0.2s;
		-moz-animation: toFixed 0.2s;
		-o-animation: toFixed 0.2s;
		-webkit-animation: toFixed 0.2s;
		height: var(--status-bar-height);
		width: 100%;
		background: #1E85E9;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999999;
	}
	
	.title .left{position:absolute;left:20upx;top:0;width:90upx;height:37upx;z-index: 11;}
	.title .left image{width:42upx;height:37upx;z-index: 12;}
	.title .left text{
		display: inline-block;
		width: 25upx;
		height: 25upx;
		border-radius: 50%;
		position: absolute;
		left: 50upx;
		top: -9upx;
		background: red;
		font-size: 15upx;
		color: #fff;
		line-height: 25upx;
		text-align: center;
		z-index: 13;
	}
	.title .right{position:absolute;right:20upx;top:0;width:39upx;height:39upx;}
	
	.title{
		height:98upx;
		text-align: center;
		font-size:36upx;
		line-height:98upx;
		color: #333333;
		position:relative;
		z-index: 10;
	}
</style>
